<template>
    <div>
       <div class="title" style="font-size: 30px;padding-bottom: 20px;">
        <h1>/axios的安装与使用/</h1>
        <el-divider content-position="right">--这个也好难呐！--</el-divider>
        </div>
        <div class="content">
            <span>
                <h2>一、axios的相关文档内容</h2>
                <el-divider></el-divider>
                <h3>1.axios官方文档<el-link type="info">点击跳转</el-link></h3>
                <h3>2.Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</h3>
                <!-- <span><img src="../../src/assets/image/learn4-1.png" alt=""></span> -->
            </span>
            <span>
                <el-divider></el-divider>
                <h2>二、axios的安装与验证是否安装成功</h2>
                <el-divider></el-divider>
                <h3>1.安装</h3>
                <h4>->npm install axios</h4>
                <h3>2.安装成功后，在main.js文件中对axios进行全局引入</h3>
                <span><img src="../../src/assets/image/learn6-1.png" alt=""></span>
                <h3>3.注意：axios不是插件，想在全局中使用它，需要将其绑定在vue的prototype属性上，给它起个名称为$http,让它等于http</h3>
                <span><img src="../../src/assets/image/learn6-2.png" alt=""></span>
                <h3>4.接下来，我们可以进入home.vue页面下，看是否安装成功</h3>
                <h3>5.在export default里写一个请求，首先，写一个生命周期mounted(接口请求一般在mounted下面),在里面拿到this.$http,
                    并从官网拿到一个请求事例，在this.$http中创建一个请求</h3>
                    <span><img src="../../src/assets/image/learn6-3.png" alt="">
                    <img src="../../src/assets/image/learn6-4.png" alt=""></span>
                <h3>6.进入页面检查代码，点击查看网络，刷新页面，看是否发出请求，打印出来404(404是因为没有对应后端服务，所以找不到接口)，
                    表示请求发出成功了，即安装配置axios成功</h3>
                    <span><img src="../../src/assets/image/learn6-5.png" alt=""></span>
            </span>
            <span>
                <el-divider></el-divider>
                <h2>三、axios的二次封装</h2>
                <el-divider></el-divider>
                <h3>1.前言：</h3>
                <h4>(1) 之所以进行二次封装，是因为需要将后台管理这个项目的配置逻辑加入axios的请求中，
                    需要配置来改变项目接口请求的地址，同时对所有的接口进行一个监听，在接口的请求前和请求后进行对应的拦截，</h4>
                <h4>(2) 比如说，在请求前，我们需要添加一个统一的header，以及在请求后需要捕获这个全局header的catch，
                    同时对异常的http状态进行监听处理。
                </h4>
                <h4>(3) 我们需要了解一下axios的概念，怎么创建axios实例呢，是通过axios.create来创建的，比如，我们在axios中添加一个对象instance,
                    对象中有一个baseURL属性用来请求一个域名，还有timeout和header属性
                </h4>
                <span><img src="../../src/assets/image/learn6-6.png" alt=""></span>
                <h4>(4) 接下来，可以通过调用axios的实例，来做对应的接口请求</h4>
                <span><img src="../../src/assets/image/learn6-7.png" alt=""></span>
                <h4>(5) 同时，axios的拦截器在实例生成完成后，对request和response进行拦截，</h4>
                <span><img src="../../src/assets/image/learn6-8.png" alt=""></span>
                <h3>2.好了，我们可以在项目中写代码逻辑了；注意，这里我的想法是将axios抽象成一个工具类，
                    所以我们在项目根目录中新建一个文件夹api，在下面创建一个axios.js文件</h3>
                    <h3>3.在axios.js文件中，写axios的一个工具类,首先引入axios</h3>
                    <h4>-->import axios from 'axios'</h4>
                    <h3>4.在此之前，因为要在axios里去处理项目的相关配置，所以需要在项目中建一个项目的配置文件，
                        在项目根目录下建一个文件夹config,在里面建index.js文件</h3>
                    <h3>5.在这个index.js中，我们来定义项目的一些相关配置，首先，进行一个导出export default,需要导出baseUrl,
                        baseUrl里有dev(代表我们的开发环境api)和pro(表示生产环境)
                    </h3>
                    <span><img src="../../src/assets/image/learn6-9.png" alt=""></span>
                    <h3>6.然后，我们可以到axios里(即axios.js文件里)进行配置文件(config/index.js)的引入</h3>
                    <h4>-->import config from '../config'</h4>
                    <h3>7.然后在里面我们可以首先对当前环境变量进行判断，先建一个变量叫baseUrl,判断当前的运行环境，
                        这里使用process.env拿到NOOE_ENV这个环境变量，对NOOE_ENV进行判断
                        (如果它是开发环境development，就让它取config中开发环境的接口地址dev,
                        否则就认为它是生产环境，让它拿到请求的config中生产环境的接口地址pro)
                    </h3>
                    <span><img src="../../src/assets/image/learn6-10.png" alt=""></span>
                    <h3>8.下面来写axios的工具类，使用es6的class语法，新建一个实例HttpRequest，并对外暴露这个类的实例HttpRequest，
                        这里使用new关键字拿HttpRequest，同时传入地址baseUrl
                    </h3>
                    <span><img src="../../src/assets/image/learn6-11.png" alt=""></span>
                    <h3>9.然后，我们的工具类HttpRequest就拿到了这个地址baseUrl，之后就可以直接配置相关的axios信息</h3>
                    <h3>10.首先，在HttpRequest中的constructor里拿我们传入进来的地址baseUrl，
                        然后将baseUrl添加到当前实例中叫baseUrl属性上（属性表示为this.baseUrl），这是初始化过程</h3>
                        <span><img src="../../src/assets/image/learn6-12.png" alt=""></span>
                    <h3>11.之后，给它添加一个方法，叫getInsideConfig,用于定义axios的相关配置</h3>
                    <h3>12.axios实例生成时传入的相关配置config/index.js，在这里面给它定一个配置的初始值，
                        有一个初始值baseUrl(这个baseUrl是config/index.js里的),
                        我们直接将这个初始值baseUrl拿到当前实例下的baseUrl(这个baseUrl用this.baseUrl表示，其值是上面axios建的变量baseUrl)</h3>
                        <h4>--注：这里是面向对象写法的一个应用</h4>
                        <span><img src="../../src/assets/image/learn6-13.png" alt=""></span>
                    <h3>13.同时，还有一个初始值header，这是config/index.js请求的请求头信息，然后就可以将config/index.js进行return</h3>
                    <span><img src="../../src/assets/image/learn6-14.png" alt=""></span>
                    <h3>14.下面，我们在HttpRequest下写一个拦截器叫interceptors,并传入一个参数(instance),这个instance是axios的一个实例</h3>
                    <h3>15.在interceptors这个拦截器函数中拿instance，拦截器可以在axios官方文档拿进来函数中（注意：要将axios改为instance）</h3>
                    <span><img src="../../src/assets/image/learn6-15.png" alt=""></span>
                    <h3>16.接下来，写一个request函数，在后续的进行接口请求时会调用这个request函数，这个函数会接收
                        传入的相关配置比如options，在request这里设一个参数options，
                    </h3>
            </span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.content{
    text-align:left;
    h2{
        font-size: 25px;
    }
    h3,h4{
        font-size: 20px;
        margin: 10px 0;
    }
}
</style>

<script>
export default{
    name: 'vueLearn6',
    data() {
        return {}
    }
}
</script>